<template>
  <div>
    <ContentTitle :info="ctInfo" />
    <el-tabs class="bg-fff mt-10 mb-10" v-model="activeName" type="card">
      <el-tab-pane label="所有设备" name="all"></el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="NB-loT" name="nbLoT"></el-tab-pane>
      <el-tab-pane label="4G/2G" name="network"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
      <div>
        
      </div>
    </el-tabs>
    <template>
      <el-table :data="devListData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="eui" label="EUI"></el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="nums" label="传感器通道"> </el-table-column>
        <el-table-column prop="devGroup" label="设备群组"> </el-table-column>
        <el-table-column prop="loop" label="上报周期(分钟)"></el-table-column>
        <el-table-column prop="mhz" label="频率(MHz)"> </el-table-column>
        <el-table-column prop="online" label="在线状态"> </el-table-column>
        <el-table-column label="绑定时间">
          <template slot-scope="scope">
            {{ scope.row.uTime | uTimeType }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <el-button type="text" size="small">移动</el-button>
          <el-button type="text" size="small">详情</el-button>
        </el-table-column>
      </el-table>
      <div class="block bg-fff center">
        <el-pagination
          @current-change="changePage"
          :current-page="query.currPage"
          :page-size="query.pageSize"
          background
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
import { $getSensorList } from "@/api/index.js";

export default {
  name: "sonsor",
  components: { ContentTitle },
  data() {
    return {
      ctInfo: {
        type: "设备",
        text: "传感器列表",
        msg: "展示EUI、名称、状态、数据类型等设备信息，可根据EUI、群组、状态、绑定时间等条件筛选具体的传感器节点，并提供移动群组等功能。",
      },
      devListData: [],
      activeName: "all",
      query: {
        //查询和分页传给后台的默认数据
        currPage: 1,
        pageSize: 5,
      },
      total: 0, //数据总数量
    };
  },
  filters: {
    uTimeType(value) {
      let date = new Date(value);
      let y = date.getFullYear() + 1; // 获取完整的年份(4位,1970)
      let m = date.getMonth(); // 获取月份(0-11,0代表1月,用的时候记得加上1)
      let d = date.getDate(); // 获取日(1-31)
      let y1 = y < 10 ? "0" + y : y;
      let m1 = m < 10 ? "0" + m : m;
      let d1 = d < 10 ? "0" + d : d;
      return `${y1} - ${m1} - ${d1}`;
    },
  },
  created() {
    this.getSonserList();
  },
  methods: {
    getSonserList() {
      $getSensorList({params:this.query}).then((res) => {
        this.devListData = res.data.data;
        this.total = res.data.total;
      });
    },
    changePage(val) {
      console.log(val);
      this.query.currPage = val;

      console.log('渲染了',this.getSonserList());
       this.getSonserList();
    },
  },
};
</script>

<style></style>
